<template>
  <div class="hc_lnav jslist">
    <div class="allbtn">
      <h2><a href="#"><strong>&nbsp;</strong>类别导航<i>&nbsp;</i></a></h2>
      <ul class="jspop box">
        <li @mouseover="showPop=1" @mouseout="showPop=-1">
          <div class=tx><a href="#"><i class="fa fa-book">&nbsp;</i>文章与专题</a> </div>
          <dl>
            <dt>最新专题</dt>
            <dd>
              <a v-for="item in filterSubject" :key="item.subjectId" @click="subjectMenuClick(item)">{{item.subjectName}}</a>
            </dd>
          </dl>
          <dl>
            <dt>最新文章</dt>
            <dd>
              <a v-for="item in filterArticle" :key="item.articleId" @click="articleMenuClick(item)">{{item.articleName}}</a>
            </dd>
          </dl>
          <div v-show="showPop===1" class=pop>
            <dl>
              <dl>
                <dt>所有专题</dt>
                <dd>
                  <a v-for="item in articleInfo.subjects" :key="item.subjectId" class="ui-link" @click="subjectMenuClick(item)">{{item.subjectName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>最新专题</dt>
                <dd>
                  <a v-for="item in filterSubject" :key="item.subjectId" @click="subjectMenuClick(item)">{{item.subjectName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>最新文章</dt>
                <dd>
                  <a v-for="item in articleInfo.articles" :key="item.articleId" class="ui-link" @click="articleMenuClick(item)">{{item.articleName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>推荐文章</dt>
                <dd>
                  <a v-for="item in articleInfo.articles" :key="item.articleId" class="ui-link" >{{item.articleName}}</a>
                </dd>
              </dl>
            </dl>
            <div class=clr></div>
          </div>

        </li>
        <li @mouseover="showPop=2" @mouseout="showPop=-1">
          <div class=tx><a href="#"><i class="fa fa-youtube-play">&nbsp;</i>专辑与视频</a> </div>
          <dl>
            <dt>最新专辑</dt>
            <dd>
              <a v-for="(item, index) in filterVideoSubject" :key="index" @click="videoSubjectClick(item)">{{item.subjectName}}</a>
            </dd>
          </dl>
          <dl>
            <dt>最新视频</dt>
            <dd>
              <a v-for="item in filterVideo" :key="item.videoId" @click="videoClick(item)">{{item.videoName}}</a>
            </dd>
          </dl>
          <div v-show="showPop===2" class=pop>
            <dl>
              <dl>
                <dt>所有专辑</dt>
                <dd>
                  <a v-for="(item, index) in videoInfo.subjects" :key="index" @click="videoSubjectClick(item)">{{item.subjectName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>最新专辑</dt>
                <dd>
                  <a v-for="(item, index) in filterVideoSubject" :key="index" @click="videoSubjectClick(item)">{{item.subjectName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>最新视频</dt>
                <dd>
                  <a v-for="item in filterVideo" :key="item.videoId" @click="videoClick(item)">{{item.videoName}}</a>
                </dd>
              </dl>
              <dl>
                <dt>推荐视频</dt>
                <dd>
                  <a v-for="item in filterVideo" :key="item.videoId" @click="videoClick(item)">{{item.videoName}}</a>
                </dd>
              </dl>
            </dl>
            <div class=clr></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from '../../../node_modules/axios/dist/axios'
export default {
  mounted () {
    this.initCategory()
  },
  data () {
    return {
      articleInfo: {},
      videoInfo: {},
      showPop: -1
    }
  },
  methods: {
    initCategory () {
      let _this = this
      axios.get('/category/categoryInfo').then(function (res) {
        if (res.data.status === 200) {
          _this.articleInfo = res.data.datas[0].articleInfo
          _this.videoInfo = res.data.datas[1].videoInfo
        }
      })
    },
    subjectMenuClick (item) {
      this.$router.push({path: '/allArticle', query: {nodeId: item.subjectId, searchTitle: item.subjectName}})
      this.$store.commit('selectNav', 2)
    },
    articleMenuClick (item) {
      this.$router.push({path: `/specificArticle/${item.articleId}`})
      this.$store.commit('selectNav', 2)
    },
    videoSubjectClick (item) {
      this.$router.push({path: '/vediodetail', query: {subjectName: item.subjectName, subjectType: item.subjectType}})
      this.$store.commit('selectNav', 1)
    },
    videoClick (item) {
      this.$router.push({path: '/vediodetail', query: {subjectName: item.subjectName, subjectType: item.subjectType, vedioId: item.videoId}})
      this.$store.commit('selectNav', 1)
    }
  },
  computed: {
    filterSubject () {
      return this._.chunk(this.articleInfo.subjects, 5)[0]
    },
    filterArticle () {
      return this._.chunk(this.articleInfo.articles, 5)[0]
    },
    filterVideoSubject () {
      return this._.chunk(this.videoInfo.subjects, 5)[0]
    },
    filterVideo () {
      return this._.chunk(this.videoInfo.videos, 5)[0]
    }
  }
}
</script>

<style scoped>
  .jslist{line-height:2em;background-color:#ffffff;font-family:arial, helvetica, sans-serif;color:#666666;font-size:12px}
  a{color:#666666;text-decoration:none;-webkit-transition-property:color;-moz-transition-property:color;-o-transition-property:color;transition-property:color;-webkit-transition-duration:.2s;-webkit-transition-timing-function:ease-in;-moz-transition-duration:.2s;-moz-transition-timing-function:ease-in;-o-transition-duration:.2s;-o-transition-timing-function:ease-in;transition-duration:.2s;transition-timing-function:ease-in}
  a:hover{color:#cd0606;text-decoration:underline}
  /* hc_lnav */
  .hc_lnav{z-index:1000;position:relative;width:220px;margin:10px 0 0 0px;}
  .hc_lnav .allbtn{z-index:99999;position:relative}
  .hc_lnav .allbtn h2{font-size:14px;box-shadow:2px 0px 6px -3px #428000;-webkit-box-shadow:2px 0px 6px -3px #428000;-moz-box-shadow:2px 0px 6px -3px #428000}
  .hc_lnav .allbtn h2 a{line-height:36px;background-color:rgba(45,86,90,1);padding-left:10px;width:220px;display:block;font-family:微软雅黑, 黑体;height:36px;color:#ffffff;font-size:16px;font-weight:normal}
  .hc_lnav .allbtn h2 a:hover{background-color:rgba(33,86,90,1);text-decoration:none}
  .hc_lnav .allbtn h2 i{}
  .hc_lnav .allbtn h2 strong{}
  .hc_lnav .allbtn ul{z-index:99999;position:relative;background-color:rgba(33,86,90,.9);width:220px;display:block;min-height: 300px;top:0px;left:0px}
  body.hc_home .hc_lnav .allbtn ul{display:block}
  body.hc_list .hc_lnav .allbtn ul{display:block}
  .hc_lnav .allbtn ul li{padding-bottom:7px;zoom:1;clear:both;cursor:default}
  .hc_lnav .allbtn ul li .tx{line-height:35px;background-color:rgba(33,86,90,.7);padding-left:10px;background-repeat:no-repeat;background-position:right center;height:35px;_background-image:none}
  .hc_lnav .allbtn ul li .tx a{font-family:微软雅黑, 黑体;color:#ffffff;font-size:14px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
  .hc_lnav .allbtn ul li .tx a i{line-height:25px;margin-top:5px;width:25px;background-position:0px 0px;float:left;height:25px;margin-right:10px;text-decoration:none}
  .hc_lnav .allbtn ul li dl{zoom:1;color:#ffffff;clear:both;overflow:auto;padding-top:4px}
  .hc_lnav .allbtn ul li dl a{line-height:22px;white-space:nowrap;float:left;color:lightblue;margin-left:6px;margin-right:6px;-webkit-transition:color 0.1s ease-out 0s;-moz-transition:color 0.1s ease-out 0s;-ms-transition:color 0.1s ease-out 0s;-o-transition:color 0.1s ease-out 0s;transition:color 0.1s ease-out 0s}
  .hc_lnav .allbtn ul li dt{padding-left:10px;float:left;padding-top:1px}
  .hc_lnav .allbtn ul li dd{line-height:22px;width:150px;float:left;padding-top:2px}
  .hc_lnav .allbtn ul li .pop{border-bottom:#599900 2px solid;position:absolute;border-left:medium none;padding-bottom:10px;background-color:#fcfcfc;min-height:466px;padding-left:30px;width:640px;padding-right:30px;display:none;height:464px;border-top:medium none;top:0px;border-right:#599900 2px solid;padding-top:10px;left:220px;box-shadow:2px 2px 5px -1px rgba(45,86,90,1);-webkit-box-shadow:2px 2px 5px -1px rgba(45,86,90,1);-moz-box-shadow:2px 2px 5px -1px rgba(45,86,90,1)}
  .hc_lnav .allbtn ul li .pop h3{display:none;font-size:14px}
  .hc_lnav .allbtn ul li .pop dl{padding-bottom:6px;color:#666666;padding-top:6px}
  .hc_lnav .allbtn ul li .pop dl:hover{background-color:#f3f3f3}
  .hc_lnav .allbtn ul li .pop dl a{color:#666666;margin-left:12px;margin-right:12px}
  .hc_lnav .allbtn ul li .pop dl a.un{color:#a5a5a5}
  .hc_lnav .allbtn ul li .pop dt{padding-left:0px;width:72px}
  .hc_lnav .allbtn ul li .pop dd{width:565px;margin-left:-12px}
  .hc_lnav .allbtn ul li .pop .act{width:640px;height:80px;overflow:hidden;padding-top:10px}
  .hc_lnav .allbtn:hover ul{display:block}
  .hc_lnav .allbtn ul li:hover{background-color:#fcfcfc}
  .hc_lnav .allbtn ul li:hover .tx{background-color:#f5f5f5}
  .hc_lnav .allbtn ul li:hover .tx a{color:#333333}
  .hc_lnav .allbtn ul li:hover .tx a i{background-position:0px -25px}
  .hc_lnav .allbtn ul li:hover .pop{display:block;top:0px;left:220px}
  .hc_lnav .allbtn ul li:hover .pop dl a.un{color:#a5a5a5;text-decoration:none}
  .hc_lnav .allbtn ul li:hover dl{color:#6e6e6e}
  .hc_lnav .allbtn ul li:hover a{color:#666666}
  .hc_lnav .allbtn ul li:hover a:hover{color:#cd0606}
</style>
